<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="nickname">
    <input type="text" id="msg">
    <button onclick="send()">发送</button> <hr/> 
    <textarea id="msgList" cols="30" rows="50"></textarea>
</body>
<script>
var socket
window.onload=function(){
    var msg=document.getElementById("msgList")
    socket=new WebSocket("ws://192.168.52.133:8080")
    socket.onopen=function(){}
    socket.onmessage=function(message){
        console.log(message.data)
        let msgObj=JSON.parse(message.data)
        msg.value +=msgObj.nickname+":"+msgObj.msg +"\n"
    }
    socket.onclose=function(){
        console.log("close")
    }
}
function send(){
     let nickname=document.getElementById("nickname").value
     let msg=document.getElementById("msg").value
     let obj={
         nickname:nickname,
         msg:msg
     }
     socket.send(JSON.stringify(obj))
}
</script>
</html>